<!--<template>-->
<!--  <div>-->
<!--  <n-config-provider>-->
<!--    <n-message-provider>-->
<!--      <div class="nav-header">-->
<!--        <div class="nav-left">-->
<!--          <router-link to="/" class="logo">酒店预订系统</router-link>-->
<!--        </div>-->
<!--        <div class="auth-buttons">-->
<!--          &lt;!&ndash; 未登录状态 &ndash;&gt;-->
<!--          <template v-if="!isLoggedIn">-->
<!--            <n-button class="auth-btn" @click="goToLogin">登录</n-button>-->
<!--            <n-button class="auth-btn" @click="goToRegister">注册</n-button>-->
<!--          </template>-->
<!--          &lt;!&ndash; 已登录状态 &ndash;&gt;-->
<!--          <template v-else>-->
<!--            <n-dropdown :options="userMenuOptions" @select="handleMenuSelect">-->
<!--              <n-button text class="user-btn">-->
<!--                <n-avatar-->
<!--                    size="small"-->
<!--                    :src="userInfo.avatar || '/src/assets/default-avatar.png'"-->
<!--                    round-->
<!--                />-->
<!--                <span class="username">{{ userInfo.nickname }}</span>-->
<!--              </n-button>-->
<!--            </n-dropdown>-->
<!--          </template>-->
<!--        </div>-->
<!--      </div>-->
<!--      <router-view></router-view>-->
<!--    </n-message-provider>-->
<!--  </n-config-provider>-->
<!--  </div>-->
<!--</template>-->

<!--<script setup>-->
<!--import {ref, onMounted,onUnmounted} from 'vue'-->
<!--import {useRouter} from 'vue-router'-->
<!--import {useMessage} from 'naive-ui'-->
<!--import bus from '@/utils/bus'-->

<!--const router = useRouter()-->

<!--const isLoggedIn = ref(false)-->
<!--const userInfo = ref({-->
<!--  nickname: '未登录',-->
<!--  avatar: ''-->
<!--})-->

<!--const userMenuOptions = [-->
<!--  {-->
<!--    label: '个人中心',-->
<!--    key: 'profile'-->
<!--  },-->
<!--  {-->
<!--    label: '退出登录',-->
<!--    key: 'logout'-->
<!--  }-->
<!--]-->

<!--const checkLoginStatus = () => {-->
<!--  const token = localStorage.getItem('token')-->
<!--  const storedUserInfo = localStorage.getItem('userInfo')-->

<!--  if (token && storedUserInfo) {-->
<!--    const info = JSON.parse(storedUserInfo)-->
<!--    userInfo.value = {-->
<!--      nickname: info.nickname || info.username || '用户',-->
<!--      avatar: info.avatar || ''-->
<!--    }-->
<!--    isLoggedIn.value = true-->
<!--  } else {-->
<!--    isLoggedIn.value = false-->
<!--    userInfo.value = {nickname: '未登录', avatar: ''}-->
<!--  }-->
<!--}-->

<!--const goToLogin = () => {-->
<!--  router.push('/front/login')-->
<!--}-->

<!--const goToRegister = () => {-->
<!--  router.push('/front/register')-->
<!--}-->

<!--const handleMenuSelect = (key) => {-->
<!--  const message = useMessage()-->
<!--  if (key === 'profile') {-->
<!--    router.push('/profile')-->
<!--  } else if (key === 'logout') {-->
<!--    localStorage.removeItem('token')-->
<!--    localStorage.removeItem('userInfo')-->
<!--    checkLoginStatus()-->
<!--    message.success('已退出登录')-->
<!--    router.push('/')-->
<!--  }-->
<!--}-->

<!--onMounted(() => {-->
<!--  checkLoginStatus()-->
<!--  bus.on('login-success', checkLoginStatus)-->
<!--})-->
<!--onUnmounted(() => {-->
<!--  bus.off('login-success', checkLoginStatus)-->
<!--})-->
<!--</script>-->

<!--<style scoped>-->
<!--.nav-header {-->
<!--  display: flex;-->
<!--  justify-content: space-between;-->
<!--  align-items: center;-->
<!--  padding: 12px 24px;-->
<!--  background: white;-->
<!--  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);-->
<!--}-->

<!--.nav-left {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--}-->

<!--.logo {-->
<!--  font-size: 20px;-->
<!--  font-weight: bold;-->
<!--  color: #333;-->
<!--  text-decoration: none;-->
<!--}-->

<!--.auth-buttons {-->
<!--  display: flex;-->
<!--  gap: 10px;-->
<!--  align-items: center;-->
<!--}-->

<!--.auth-btn {-->
<!--  background-color: #1E90FF;-->
<!--  color: white;-->
<!--}-->

<!--.auth-btn:hover {-->
<!--  background-color: #4169E1;-->
<!--}-->

<!--.user-btn {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  gap: 8px;-->
<!--  cursor: pointer;-->
<!--}-->

<!--.username {-->
<!--  margin-left: 4px;-->
<!--}-->
<!--</style>-->

<!--<style>-->
<!--body {-->
<!--  min-height: 100vh;-->
<!--  background: linear-gradient(135deg, #e0f7fa 0%, #90caf9 100%);-->
<!--  background-attachment: fixed;-->
<!--}-->
<!--</style>-->

<template>
  <div>
    <n-config-provider>
      <n-message-provider>
        <!-- 只在非 /admin 页面显示白色导航栏 -->
        <div v-if="!isAdminPage" class="nav-header">
          <div class="nav-left">
            <router-link to="/" class="logo">酒店预订系统</router-link>
          </div>
          <div class="auth-buttons">
            <template v-if="!isLoggedIn">
              <n-button class="auth-btn" @click="goToLogin">登录</n-button>
              <n-button class="auth-btn" @click="goToRegister">注册</n-button>
            </template>
            <template v-else>
              <n-dropdown :options="userMenuOptions" @select="handleMenuSelect">
                <n-button text class="user-btn">
                  <n-avatar
                      size="small"
                      :src="userInfo.avatar || '/src/assets/default-avatar.png'"
                      round
                  />
                  <span class="username">{{ userInfo.nickname }}</span>
                </n-button>
              </n-dropdown>
            </template>
          </div>
        </div>
        <router-view></router-view>
      </n-message-provider>
    </n-config-provider>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useMessage } from 'naive-ui'
import bus from '@/utils/bus'

const router = useRouter()
const route = useRoute()

// 判断是否为后台页面
const isAdminPage = computed(() => route.path.startsWith('/admin'))

const isLoggedIn = ref(false)
const userInfo = ref({
  nickname: '未登录',
  avatar: ''
})

const userMenuOptions = [
  { label: '个人中心', key: 'profile' },
  { label: '退出登录', key: 'logout' }
]

const checkLoginStatus = () => {
  const token = localStorage.getItem('token')
  const storedUserInfo = localStorage.getItem('userInfo')
  if (token && storedUserInfo) {
    const info = JSON.parse(storedUserInfo)
    userInfo.value = {
      nickname: info.nickname || info.username || '用户',
      avatar: info.avatar || ''
    }
    isLoggedIn.value = true
  } else {
    isLoggedIn.value = false
    userInfo.value = { nickname: '未登录', avatar: '' }
  }
}

const goToLogin = () => {
  router.push('/front/login')
}

const goToRegister = () => {
  router.push('/front/register')
}

const handleMenuSelect = (key) => {
  const message = useMessage()
  if (key === 'profile') {
    // 管理员跳转后台，普通用户跳转前台个人中心
    const info = JSON.parse(localStorage.getItem('userInfo') || '{}')
    if (info.role === 'admin') {
      router.push('/admin')
    } else {
      router.push('/profile')
    }
  } else if (key === 'logout') {
    localStorage.removeItem('token')
    localStorage.removeItem('userInfo')
    checkLoginStatus()
    message.success('已退出登录')
    router.push('/')
  }
}

onMounted(() => {
  checkLoginStatus()
  bus.on('login-success', checkLoginStatus)
})
onUnmounted(() => {
  bus.off('login-success', checkLoginStatus)
})
</script>

<style scoped>
.nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.nav-left {
  display: flex;
  align-items: center;
}

.logo {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  text-decoration: none;
}

.auth-buttons {
  display: flex;
  gap: 10px;
  align-items: center;
}

.auth-btn {
  background-color: #1E90FF;
  color: white;
}

.auth-btn:hover {
  background-color: #4169E1;
}

.user-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.username {
  margin-left: 4px;
}
</style>

<style>
body {
  min-height: 100vh;
  background: linear-gradient(135deg, #e0f7fa 0%, #90caf9 100%);
  background-attachment: fixed;
}
</style>